{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "089cfc9a-ee04-4a75-b519-e1b1ef4c5ed5",
   "metadata": {},
   "source": [
    "# The Layout and Style Widgets\n",
    "\n",
    "## The Layout widget\n",
    "The layout widget is a widget that adheres to any other widget. It holds some CSS layout properties for its father widget. E.g: width and height, alignment, border..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "3643e44d-0220-46be-867e-8e7781fb7bbe",
   "metadata": {},
   "outputs": [],
   "source": [
    "{-# LANGUAGE OverloadedStrings #-}\n",
    "import IHaskell.Display.Widgets\n",
    "import qualified IHaskell.Display.Widgets.Layout as L\n",
    "import Data.Text as T"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "billion-cookbook",
   "metadata": {},
   "source": [
    "First, we need a sample widget to modify its layout"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "d8430ed3-0e24-4057-8230-73c47fa75793",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1ede881c-d143-41db-a247-281e2cc0146a",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "button <- mkButton\n",
    "setField @Description button \"Click me!\"\n",
    "button"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "supreme-ribbon",
   "metadata": {},
   "source": [
    "Then, we get the associated Layout widget with `getField`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "08d9c91c-8065-4a66-b564-b225e316f379",
   "metadata": {},
   "outputs": [],
   "source": [
    "layout <- getField @Layout button"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "immediate-hospital",
   "metadata": {},
   "source": [
    "We can display all the things we can modify using the `properties` function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "6357dffb-f70e-475e-a007-41211d495042",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "ModelModule ::: Text\n",
       "ModelModuleVersion ::: Text\n",
       "ModelName ::: Text\n",
       "ViewModule ::: Text\n",
       "ViewModuleVersion ::: Text\n",
       "ViewName ::: Text\n",
       "LAlignContent ::: Maybe [Char]\n",
       "LAlignItems ::: Maybe [Char]\n",
       "LAlignSelf ::: Maybe [Char]\n",
       "LBorderBottom ::: Maybe [Char]\n",
       "LBorderLeft ::: Maybe [Char]\n",
       "LBorderRight ::: Maybe [Char]\n",
       "LBorderTop ::: Maybe [Char]\n",
       "LBottom ::: Maybe [Char]\n",
       "LDisplay ::: Maybe [Char]\n",
       "LFlex ::: Maybe [Char]\n",
       "LFlexFlow ::: Maybe [Char]\n",
       "LGridArea ::: Maybe [Char]\n",
       "LGridAutoColumns ::: Maybe [Char]\n",
       "LGridAutoFlow ::: Maybe [Char]\n",
       "LGridAutoRows ::: Maybe [Char]\n",
       "LGridColumn ::: Maybe [Char]\n",
       "LGridGap ::: Maybe [Char]\n",
       "LGridRow ::: Maybe [Char]\n",
       "LGridTemplateAreas ::: Maybe [Char]\n",
       "LGridTemplateColumns ::: Maybe [Char]\n",
       "LGridTemplateRows ::: Maybe [Char]\n",
       "LHeight ::: Maybe [Char]\n",
       "LJustifyContent ::: Maybe [Char]\n",
       "LJustifyItems ::: Maybe [Char]\n",
       "LLeft ::: Maybe [Char]\n",
       "LMargin ::: Maybe [Char]\n",
       "LMaxHeight ::: Maybe [Char]\n",
       "LMaxWidth ::: Maybe [Char]\n",
       "LMinHeight ::: Maybe [Char]\n",
       "LMinWidth ::: Maybe [Char]\n",
       "LObjectFit ::: Maybe [Char]\n",
       "LObjectPosition ::: Maybe [Char]\n",
       "LOrder ::: Maybe [Char]\n",
       "LOverflow ::: Maybe [Char]\n",
       "LPadding ::: Maybe [Char]\n",
       "LRight ::: Maybe [Char]\n",
       "LTop ::: Maybe [Char]\n",
       "LVisibility ::: Maybe [Char]\n",
       "LWidth ::: Maybe [Char]"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "properties layout"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "ef00e9aa-3f48-42ff-bb45-9f59b09e78e4",
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @L.Height layout $ Just \"50px\"\n",
    "setField @L.MinWidth layout $ Just \"70%\"\n",
    "setField @L.Padding layout $ Just \"10px\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "furnished-quantity",
   "metadata": {},
   "source": [
    "The layout widget is most useful with the `Box` widgets, if you know how to use CSS layouts.\n",
    "\n",
    "## The Style Widgets\n",
    "\n",
    "Some widgets have some predefined styles that you can set, like buttons or sliders. But if you want more customization you have to use a Style widget. There are five kinds of style widgets:\n",
    "\n",
    "- `ButtonStyle`\n",
    "- `DescriptionStyle`\n",
    "- `ProgressStyle`\n",
    "- `SliderStyle`\n",
    "- `ToggleButtonsStyle`\n",
    "\n",
    "We are going to do an example with a slider. First, we have to create both widgets:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "widespread-precipitation",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "def956c6-a71a-4aa1-b78a-e65b3cb068d8",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "-- Creating the slider\n",
    "slider <- mkIntSlider\n",
    "\n",
    "-- Creating the style widget\n",
    "style <- mkSliderStyle\n",
    "\n",
    "-- Displaying the slider\n",
    "slider"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "internal-movement",
   "metadata": {},
   "source": [
    "Then, we set the Slider's style, setting the field `Style`. We have to use the `StyleWidget` constructor."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "physical-anthony",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>/* Styles used for the Hoogle display in the pager */\n",
       ".hoogle-doc {\n",
       "display: block;\n",
       "padding-bottom: 1.3em;\n",
       "padding-left: 0.4em;\n",
       "}\n",
       ".hoogle-code {\n",
       "display: block;\n",
       "font-family: monospace;\n",
       "white-space: pre;\n",
       "}\n",
       ".hoogle-text {\n",
       "display: block;\n",
       "}\n",
       ".hoogle-name {\n",
       "color: green;\n",
       "font-weight: bold;\n",
       "}\n",
       ".hoogle-head {\n",
       "font-weight: bold;\n",
       "}\n",
       ".hoogle-sub {\n",
       "display: block;\n",
       "margin-left: 0.4em;\n",
       "}\n",
       ".hoogle-package {\n",
       "font-weight: bold;\n",
       "font-style: italic;\n",
       "}\n",
       ".hoogle-module {\n",
       "font-weight: bold;\n",
       "}\n",
       ".hoogle-class {\n",
       "font-weight: bold;\n",
       "}\n",
       "\n",
       ".get-type {\n",
       "color: green;\n",
       "font-weight: bold;\n",
       "font-family: monospace;\n",
       "display: block;\n",
       "white-space: pre-wrap;\n",
       "}\n",
       ".show-type {\n",
       "color: green;\n",
       "font-weight: bold;\n",
       "font-family: monospace;\n",
       "margin-left: 1em;\n",
       "}\n",
       ".mono {\n",
       "font-family: monospace;\n",
       "display: block;\n",
       "}\n",
       ".err-msg {\n",
       "color: red;\n",
       "font-style: italic;\n",
       "font-family: monospace;\n",
       "white-space: pre;\n",
       "display: block;\n",
       "}\n",
       "#unshowable {\n",
       "color: red;\n",
       "font-weight: bold;\n",
       "}\n",
       ".err-msg.in.collapse {\n",
       "padding-top: 0.7em;\n",
       "}\n",
       "\n",
       ".highlight-code {\n",
       "white-space: pre;\n",
       "font-family: monospace;\n",
       "}\n",
       "\n",
       ".suggestion-warning { \n",
       "font-weight: bold;\n",
       "color: rgb(200, 130, 0);\n",
       "}\n",
       ".suggestion-error { \n",
       "font-weight: bold;\n",
       "color: red;\n",
       "}\n",
       ".suggestion-name {\n",
       "font-weight: bold;\n",
       "}\n",
       "\n",
       "</style><span class='get-type'>StyleWidget :: forall w. RecAll Attr (WidgetFields w) ToPairs => IPythonWidget w -> StyleWidget</span>"
      ],
      "text/plain": [
       "StyleWidget :: forall w. RecAll Attr (WidgetFields w) ToPairs => IPythonWidget w -> StyleWidget"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    ":t StyleWidget\n",
    "setField @Style slider $ StyleWidget style"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "turned-implement",
   "metadata": {},
   "source": [
    "What happens if we set a long description?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "chemical-applicant",
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @Description slider \"This is a long description\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "differential-trademark",
   "metadata": {},
   "source": [
    "The description is so long, the fronted has to cut it by default. But we have our style widget to save us. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "relevant-intensity",
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @DescriptionWidth style \"14em\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "defensive-minutes",
   "metadata": {},
   "source": [
    "Now the widget is very small... Let's make it a bit bigger using our layout tricks..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "collective-failing",
   "metadata": {},
   "outputs": [],
   "source": [
    "layout <- getField @Layout slider\n",
    "setField @L.Width layout $ Just \"30em\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ignored-nomination",
   "metadata": {},
   "source": [
    "We can also set the color of the handle to anything we want"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "perfect-antarctica",
   "metadata": {},
   "outputs": [],
   "source": [
    "setField @HandleColor style $ Just \"pink\""
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Haskell",
   "language": "haskell",
   "name": "haskell"
  },
  "language_info": {
   "codemirror_mode": "ihaskell",
   "file_extension": ".hs",
   "mimetype": "text/x-haskell",
   "name": "haskell",
   "pygments_lexer": "Haskell",
   "version": "9.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
